<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	.pq-grid p
	{
	    margin:10px;
	}
	.pq-grid .pq-tabs b
	{
	    font-weight:bold;
	}
	</style>

<script>
    $(function () {
        var colM = [
            { title: "", minWidth: 27, maxWidth: 27, type: "detail", resizable: false, editable: false /* no need to mention dataIndx */ },
            { title: "ShipCountry", width: 100, dataIndx: "ShipCountry",
                filter: { type: 'textbox', listeners: ['keyup'], condition: 'begin' }
            },
            { title: "Customer Name", width: 120, dataIndx: "ContactName",
                filter: { type: 'textbox', listeners: ['keyup'], condition: 'begin' }
            },
            { title: "Order ID", width: 100, dataIndx: "OrderID", dataType: "integer", editable: false,
                filter: { type: 'textbox', listeners: ['keyup'], condition: 'begin' }
            },
		    { title: "Shipping Via", width: 100, dataIndx: "ShipVia" },
            { title: "Freight", width: 100, align: "right", dataType: "float", dataIndx: "Freight",
                validations: [{ type: 'lte', value: 2, msg: 'should be <=2'}],
                summary: {
                    type: ["sum", "sum"],
                    title: [
                        function (ui) {
                            return ui.prevRowData.ShipCountry + " Total: "+ui.rowData.Freight;
                        },
                        function (ui) {
                            return ui.prevRowData.ContactName + " Total: " +ui.rowData.Freight;
                        }
                    ]
                }
            },
            { title: "Shipping Name", width: 160, dataIndx: "ShipName" }
        ];

        var dataModel = {
            location: "remote",
            sorting: "local",
            dataType: "JSON",
            method: "GET",
            recIndx: "OrderID",
            url: "/Content/orders.json",
            //url: "/pro/orders/get",//for ASP.NET
            //url: "/pro/orders.php",//for PHP
            getData: function (dataJSON) {
                var data = dataJSON.data;
                //expand the first row                
                data[0]['pq_detail'] = { 'show': true };
                return { curPage: dataJSON.curPage, totalRecords: dataJSON.totalRecords, data: data };
            }
        }

        var $gridMain = $("div#grid_md").pqGrid({
            height: 550,
            dataModel: dataModel,
            colModel: colM,
            //pageModel: { type: "local", rPP: 50, rPPOptions: [10, 15, 50], strDisplay: "{0} to {1} of {2}" },
            title: "<b>Shipping Orders</b>",
            resizable: true,
            create: function () {
                $(this).pqGrid('enableSelection');
            },            
            selectionModel: { type: 'cell' },
            filterModel: { header: true, type: 'local' },
            scrollModel: { autoFit: true },
            virtualX: true,
            virtualY: true,
            groupModel: groupModel = {
                dataIndx: ["ShipCountry", "ContactName"],
                collapsed: [false, false],
                title: [
                    "<b style='font-weight:bold;'>{0} ({1} orders)</b>",
                    "<b style='font-weight:bold;'>{0} ({1} orders)</b>"
                ],                
                dir: ["up", "up"],
                titleCls: ['darkblue', 'blue'],
                summaryCls: ['ShipCountry', "ContactName"],
                icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"],
                    ["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
            },
            detailModel: { init: function (ui) {
                var rowData = ui.rowData,
                    orderID = ui.rowData["OrderID"],
                //get markup of the detail template.
                    $tmpl = $("#tmpl"),
                    html = $tmpl.html();
                for (var key in rowData) {
                    var cellData = (rowData[key] == null) ? "" : rowData[key];
                    html = html.replace("<#=" + key + "#>", cellData);
                }
                //create detail place holder
                var $detail = $("<div tabindex='0'></div>");
                $detail.html(html);
                $detail.find(".pq-tabs").tabs().on("tabsactivate", function (evt, ui) {
                    var $grid = ui.newPanel.find(".pq-grid");
                    $grid.pqGrid("refresh");
                });

                //make a deep copy of gridDetailModel
                var objCopy = $.extend(true, {}, gridDetailModel);

                objCopy.dataModel.url = "/pro/orderdetails/get?orderId=" + orderID;
                //objCopy.dataModel.url = "/pro/orderdetails.php?orderId=" + orderID;//for PHP

                //append pqGrid in the 2nd tab.                
                $("<div></div>").appendTo($("#tabs-2", $detail)).pqGrid(objCopy);

                return $detail;
            }
            }
        });

        //details grid
        var gridDetailModel = {
            pageModel: { type: "local", rPP: 5, strRpp: "" },
            dataModel: {
                location: "remote",
                sorting: "local",
                dataType: "jsonp",
                method: "GET",
                sortIndx: "ProductName",
                getData: function (dataJSON) {
                    return { data: dataJSON.data };
                }
            },
            colModel: [
                { title: "Order ID", width: 90, dataIndx: "OrderID" },
                { title: "Product ID", width: 90, dataType: "integer", dataIndx: "ProductID" },
                { title: "Product Name", width: 230, dataIndx: "ProductName" },
		        { title: "Unit Price", width: "150", align: "right", dataIndx: "UnitPrice", dataType: "float",
		            summary: {
		                type: ["sum"],
		                title: ["<b style='font-weight:bold;'>Total Price:</b> ${0}"]
		            },
		            validations: [{ type: 'gte', value: 3}]
		        },
		        { title: "Quantity", align: "right", width: 105, dataIndx: "Quantity", dataType: "integer",
		            summary: {
		                type: ["sum"],
		                title: ["<b style='font-weight:bold;'>Total Qty:</b> {0}"]
		            }
		        },
		        { title: "Discount", width: 80, align: "right", dataIndx: "Discount", dataType: "float" }
		    ],
            groupModel: {
                dataIndx: ["OrderID"],
                dir: ["up"],
                title: ["{0} - {1} product(s)"],
                icon: [["ui-icon-triangle-1-se", "ui-icon-triangle-1-e"]]
            },
            height: 'flex',
            width: "auto",
            numberCell: { show: false },
            showTop: false,
            showBottom: false
        };

    });
        
</script>    
</head>
<body>

<div id="grid_md" style="margin:5px auto;"></div>

<!--script tag used to define detail template-->
<script type="text/pq-template" id="tmpl">
    <div class="pq-tabs" style="width:auto;">
        <ul>
            <li><a href="#tabs-2">Products</a></li>            
            <li><a href="#tabs-1">Address</a></li>            
            <li><a href="#tabs-3">Dates</a></li>
        </ul>
        <div id="tabs-2">
        </div>        
        <div id="tabs-1" class='pq-native-select pq-no-capture'>
            <p><b>Shipping Address:</b> <#=ShipAddress#></p>
            <p><b>Shipping City:</b> <#=ShipCity#></p>
            <p><b>Shipping Region:</b> <#=ShipRegion#></p>
            <p><b>Shipping Postal Code:</b> <#=ShipPostalCode#></p>
        </div>        
        <div id="tabs-3" class='pq-native-select pq-no-capture'>
            <p><b>Order Date:</b> <#=OrderDate#></p>
            <p><b>Required Date:</b> <#=RequiredDate#></p>
            <p><b>Shipped Date:</b> <#=ShippedDate#></p>
        </div>
    </div>
</script>

</body>

</html>
